<template>
  <div >
            
            <div class="schart-box">
               
                <schart class="schart" canvasId="bar" :data="list"  type="bar" :options="options1"></schart>
            </div>
            <div class="schart-box">
           
            <schart class="schart" canvasId="line" :data="list" type="line" :options="options2"></schart>
            </div>
            
        </div>
</template>

<script>
import Schart from 'vue-schart';
export default {
         components: {
            Schart,
        },
    data: () => ({
            list:[
               {name:'营销额',value:111},
                {name:'浏览量',value:1111}
            
            ],
              options1: {
               title:'每月的营销数',
               
                bgColor: 'transparent',
                fillColor: 'black',
                 titleColor: '#00887C',
                contentColor: 'rgba(46,199,201,0.3)',
                
            },
            options2: {              
             title:'每月的营销额',
                bgColor: 'transparent',
                titleColor: '#00887C',
                fillColor: 'black',
                contentColor: 'rgba(46,199,201,0.3)'
            },
    }),

   
    // created () {
    //     axios({
    //          url: "api/residence/getResidenceById",
    //          method: "get",
            
    //        }).then((res)=>{
    //            this.list = res.data
               
    //        })
   
    // }
    }

</script>

<style>

.schart-box{
    display: inline-block;
    margin: 20px;
    width: 500px;
    height: 500px;
}
    .schart{
        width: 500px;
        height: 400px;
    }
   
</style>